<!DOCTYPE html>
<html lang="en" xmlns:class="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>全部商品</title>
</head>
<style>
    .top-title:hover{
        cursor: pointer;
        color: #b31e22!important;
    }
    .menu-index{
        text-align: center;
        width: 150px;
        color: #FFFFFF;
        cursor: pointer;
    }
    .menu-index:hover{
        background-color: rgb(241, 151, 1);
    }
    .menu-active{
        background-color: #fdef01 !important;
    }
    .SearchBar input {
        height: 50px;
        width: 530px;
    }


    .image {
        margin-top: 10px;
        width: 200px;
        height: 200px;
        object-fit: fill;
        display: block;
    }
    .button {
        padding: 0;
        float: right;
    }
    .type-title{
        font-size: 19px;
        color: #666666;
        display: inline-block;
        margin-left: 20px;
    }
    .type-item{
        font-size: 19px;
        color: #666666;
        display: inline-block;
        margin-right: 20px;
        cursor: pointer;
    }
    .type-item:hover{
        color: #b31e22;
    }
    .type-item-active{
        color: #b31e22;
    }
</style>
<body>
<div id="app">
    <!--顶部用户导航栏-->
    <template>
        <div style="font-size: 14px;">
            <div style="display: flex;height: 60px;padding: 0 320px;background-color: #f5f5f5;border-radius: 10px">
                <div v-show="visibleAlready" style="margin-top: 3px">
                    <el-col :span="6">
                        <el-avatar style="height: 50px;width:50px;" :src="User.userImg"></el-avatar>
                    </el-col>
                    <el-col :span="18" style="line-height:50px">
                        <span style="padding-right: 30px;line-height: 40px;color: #666;margin-left:30px">{{User.realName}}</span>
                    </el-col>
                </div>
                <div v-show="visibleNotYet" style="margin-top: 10px">
                    <span style="padding-right: 20px;line-height: 40px;color: #666;">欢迎光临淘书网,请</span>
                    <el-button type="text" style="color: #666;margin-right: 10px;" class="top-title" @click="jumpLogin">登录</el-button>
                    <span style="padding-right: 20px;line-height: 40px;">|</span>
                    <el-button type="text" style="color: #666" class="top-title" @click="jumpRegister">注册</el-button>
                </div>
                <div style="flex: 1;display: flex;">
                    <div style="flex: 0.75;"></div>
                    <div style="width: 300px;display: flex;">
                        <el-button type="text" style="color: #666;margin-right: 10px;" class="top-title" @click="jumpPersonalCenter"> <i class="el-icon-user"></i>个人中心</el-button>
                        <el-button type="text" style="color: #666;margin-right: 10px;" class="top-title" @click="jumpCart"><i class="el-icon-shopping-cart-2"></i>购物车</el-button>
                        <el-button type="text" style="color: #666;margin-right: 10px;" class="top-title" @click="jumpOrders"><i class="el-icon-goods"></i>我的订单</el-button>
                        <el-button type="text" style="color: #666;margin-right: 10px;" class="top-title"><i class="el-icon-star-off"></i>我的收藏</el-button>
                        <el-button type="text" v-show="visibleAlready" style="color: #666;margin-right: 10px;" class="top-title" @click=" killSession"><i class="el-icon-switch-button"></i>退出登录</el-button>
                    </div>
                </div>
            </div>
        </div>
        <div style="margin: 0 300px;height: 100px;line-height: 100px;margin-top: 30px">
            <div style="display: flex;">
                <div style="width: 200px;height: 100px;">
                    <img src="../img/logo.png" style="width: 250px;height: 100px;">
                </div>
                <div class="SearchBar" style="flex: 1;text-align: center;padding: 0 50px;">
                    <el-input placeholder="书名/作者/分类"  style="width:500px;margin-top: 30px;margin-left: 30px" v-model="input">
                        <el-button slot="append" icon="el-icon-search">搜索</el-button>
                    </el-input>
                </div>
            </div>
        </div>
    </template>
    <template>
        <div style="margin-left: 300px;margin-right: 300px">
            <div style="font-size: 20px">
                <div style="display: flex;border-bottom: 1px solid #b31e22;">
                    <div style="line-height: 50px;flex: 1;">
                        <el-tag
                                style="margin: 0 5px;font-size: 18px"
                                v-for="tag in tags"
                                :key="tag.name"
                                closable
                                @close="handleClose(tag)"
                                :type="tag.type">
                            {{tag.name}}
                        </el-tag>
                    </div>
                        <div style="text-align: right;margin-top: 5px">
                            <el-button style="background-color: #b31e22;color: #ffffff;font-size: 17px;">重置</el-button>
                        </div>
                </div>
                <div style="padding: 10px 0;border-bottom: 1px solid #d1d1d1;">
                    <div class="type-title">分类：</div>
                    <div v-for="(item,index) in types1" :class="'type-item '+(index === typeIndex1?'type-item-active':'')" @click="selType1(index)">{{item}}</div>
                </div>
                <div style="padding: 10px 0;border-bottom: 1px solid #d1d1d1;">
                    <div class="type-title">价格：</div>
                    <div v-for="(item,index) in types2" :class="'type-item '+(index === typeIndex2?'type-item-active':'')" @click="selType2(index)">{{item}}</div>
                </div>
                <div style="height: 50px;background-color: #f5f5f5;margin: 10px 0 5px 0;line-height: 50px;">
                    <div class="type-title">排序：</div>
                    <div v-for="(item,index) in types3" :class="'type-item '+(index === typeIndex3?'type-item-active':'')" @click="selType3(index)">{{item}}</div>
                </div>
            </div>
        <el-row>
            <el-col :span="6" v-for="book in dataList" :key="book.id">
                <el-card :body-style="{ padding: '0px' }" shadow="hover" style="margin-left: 20px;margin-top: 10px;cursor: pointer;"
                         class="card"
                         @click.native ="jumpBookDetails(book.id)">
                    <img :src="book.bookImg" class="image">
                    <div style="padding: 10px;">
                        <div style="display: flex;align-items: center;height: 35px">
                            <p style="flex: 0 0 65%;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;">{{ book.bookName }}</p>
                            <span style="text-align: right;flex: 1;font-size: 10px;color: #666;margin-top: 3px">销量:1000+</span>
                        </div>
                        <div style="white-space:nowrap;">
                            <p style="float: left;color: #fe6144"> ¥{{ (book.price).toFixed(2) }}</p>
                            <el-button type="text" class="button" style="float: right;margin-top: 6px" @click="jumpBookDetails(book.id)">去购买</el-button>
                        </div>
                    </div>
                </el-card>
            </el-col>
        </el-row>
        <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                :page-sizes="[16, 10, 15, 20]"
                :page-size="16"
                layout="total, prev, pager, next, jumper"
                :total="totalCount"
        >
        </el-pagination>
        </div>
    </template>
</div>
</body>
<!-- 引入组件库 -->
<script src="../js/vue.js"></script>
<script src="../element-ui/lib/index.js"></script>
<link rel="stylesheet" href="../element-ui/lib/theme-chalk/index.css">
<script src="../js/axios-0.18.0.js"></script>
<script src="../js/request.js"></script>
<<script>
    new Vue({
        el: '#app',
        created() {
            //钩子函数，vue对象初始化后执行
            this.getUser()
        },
        mounted() {
            //页面加载完成后，发送异步请求，获取所有数据
            this.selectByPageAndCondition()

        },
        methods: {
            getUser() {//获取用户名
                //发送ajax请求
                axios({
                    method:"get",
                    url:"/user",
                }).then(resp =>{
                    this.User = resp.data;
                    console.log(this.User);
                    if (this.User !== null && this.User !== ""&& this.User !==undefined) {
                        this.visibleNotYet = false;
                        this.visibleAlready= true;
                    }else{this.User={username:null}}
                })
            },
            killSession() {//退出登录
                this.$confirm('确认退出登录, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.visibleNotYet = true;
                    this.visibleAlready = false;
                    //发送ajax请求
                    axios.post("/user/logout").then((res) => {

                    })
                    this.$message({
                        message: '退出成功',
                        type: 'success'
                    });
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消'
                    });
                });
            },
            selectByPageAndCondition() {
                var _this=this;
                axios({
                    method: "post",
                    url: "/book/page?currentPage="
                        + _this.currentPage + "&pageSize=" + _this.pageSize,
                    data: _this.searchDialog
                }).then(function (resp) {
                    _this.dataList = resp.data.items;
                    _this.totalCount = resp.data.totalCount;
                })
            },
            onSubmit() {
                console.log(this.searchDialog);
                this.currentPage = 1;//每次查询回到页码到第一页
                this.selectByPageAndCondition();
            },
            handleSizeChange(val) {
                this.pageSize = val;
                this.selectByPageAndCondition();
                // console.log(`每页 ${val} 条`);
            },
            //当前页数
            handleCurrentChange(val) {
                this.currentPage = val;
                this.selectByPageAndCondition();
                // console.log(`当前页: ${val}`);
            },
            handleClose(tag) {
                this.tags.splice(this.tags.indexOf(tag), 1);
            },
            selType1(index){
                this.typeIndex1 = index;
            },
            selType2(index){
                this.typeIndex2 = index;
            },
            selType3(index){
                this.typeIndex3 = index;
            },
            jumpBookDetails(id) {
                window.open("bookDetails.html?id=" + id);
            },
            jumpAllBook(){
                location.href ="allBook.html";
            },
            jumpIndex(){
                location.href ="index.html";
            },
            jumpLogin(){
                location.href ="/login_page/login.html";
            },
            jumpRegister(){
                location.href ="/login_page/register.html";
            },
            jumpPersonalCenter(){
                location.href ="personCenter.html";
            },
            jumpCart(){
                location.href ="cart.html";
            },
            jumpOrders(){
                location.href ="orders.html";
            }
        },
        data() {
            return {
                User:[],//用户信息
                visibleNotYet:true,
                visibleAlready:false,
                totalCount:100,
                currentPage:1,
                pageSize:16,
                dataList:[],
                searchDialog:{},
                book:{
                    id:'',
                    bookName:'',
                    author:'',
                    bookImg:'',
                    price:''
                },
                tags: [
                     { name: '分类：文学', type: 'info'}
                ],
                types1: ['全部','文学','社科','少儿','教材','科技'],
                typeIndex1: 0,
                types2: ['全部','0-30','30-50','50-80','80-100','大于100'],
                typeIndex2: 0,
                types3: ['默认','销量↑','销量↓','销量↑','价格↓'],
                typeIndex3: 0,
                input:'',
            }
        }
    })
</script>
</html>